import { View, Text } from "@tarojs/components";
import { Input } from "@taroify/core"
import { observer } from "mobx-react";
import React, { Fragment, useEffect, useState } from "react";
import { XmToast } from "@/components/public";
import { XmIcon } from "@/components/ui";
import { onRequestPayment } from '@/path/acrossAPI/index'
import "./index.scss"
import Button from "@taroify/core/button/button";
import Navbar from "@/components/ui/navbar";
import { Router } from "@/path/router";
import { XmImage } from "@/components/tool";
import { userStore } from "@/store";
import { formatMoney,addCommas } from '@/path/tool/until'
import { giftingRules } from '@/path/api/setting/index'
import { pointsRecharge } from '@/path/api/pay/index'
function Index() {
  /*
  * 更新资料操作
  */
  const submit = ()=>{
    if(Number(price)==0||price==''){
      XmToast.fail('支付金额不能为空')
      return
    }
    let totalPrice = (Number(price)*10).toFixed(0); // 计算购买积分
    // 根据规则计算赠送积分 赠送积分规则为每满100元，赠送对应百分比的积分（对应百分比由后台控制）
    let points = calculatePoints(Number(price)*10).toFixed(0);
    const data = {
      integral:Number(totalPrice)+Number(points),
      amount:price
    }
    pointsRecharge(data).then((res:any)=>{
      onRequestPayment({
        timeStamp: res.data.timeStamp,
        nonceStr: res.data.nonceStr,
        packages: res.data.packageVal,
        sign: res.data.paySign,
      }).then(()=>{
        setPrice('')
        Router.toStatusPage({
          title:'支付成功',
          img:'pay-success.png',
          text:'恭喜您！支付成功'
        })
      })
    })
    return
    // 判断用户信息是否都已填写
    
  }
  const [rule,setRule] = useState(0)
  const calculatePoints = (amount: number): number => {
    const fullHundredAmount = Math.floor(amount / 100) * 100; // 计算满百的金额
    const percentage = rule; // 赠送的百分比，此处表示为10%
    const points = Math.floor((fullHundredAmount * percentage) / 100); // 计算赠送的积分
    return points;
  }
  
  // 获取积分赠送规则
  useEffect(()=>{
    giftingRules().then((res)=>{
      setRule(res?.data||0)
    })
  },[])
  const [price,setPrice] = useState('')
  
  return <>
    <View className="wallet-nav">
      <Navbar showIcon={true} titleClassName="wallet-nav-title" title={'积分钱包'} />
    </View>
    <View className="wallet">
      <View className="wallet-tip">
        <Text>我的钱包</Text>
      </View>
      <View className="wallet-box">
        <View className="wallet-box-content">
          {/* <View className="wallet-box-text wallet-box-left">
            <Text>已实名</Text>
          </View> */}
          <View className="wallet-box-imgbox">
            <XmImage src={userStore.userInfo.avatar} className="wallet-box-img" static/>
          </View>
          <View className="wallet-box-text wallet-box-right">
            <XmIcon icon={"anquanbaozhangzhong"} size={46} />
          </View>
          <View className="wallet-box-text wallet-box-text-line">
            <Text>安全保障中</Text>
          </View>
          <View className="wallet-box-bottom">
            <View className="wallet-cell border-btm">
              <Text className="c-black f-weight-bold s-sm-2">充值金额</Text>
              <View className="wallet-cell-right">
                <Input className="t-right cell-ipt s-sm-2" value={price} onInput={(e)=>setPrice(formatMoney(e.detail.value))} type="number" placeholder="填写充值金额"></Input>
              </View>
            </View>
            <View className="wallet-tips">
              <Text>充值：{addCommas((Number(price)*10).toFixed(0))}积分+赠送{calculatePoints(Number(price)*10).toFixed(0)}积分</Text>
            </View>
            <View className="wallet-tips">
              <Text>1元等于10积分，充值每满100元赠送{rule}%积分</Text>
            </View>
            <View className="wallet-box-btn">
              <Button color="primary" onClick={submit} shape="round" block>确定充值</Button>
            </View>
          </View>
        </View>
      </View>
    </View>
  </>
}

const Higher = React.memo(observer(Index));
export default () => <Fragment><Higher /></Fragment>
